<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ToolTip</title>
    <style type="text/css">
        .body {
            width: 500px;
            height: 600px;
            font-size: 14px;
            background-color: #eee;
        }

        #demo {
            width: 400px;

            margin: auto;
            position: relative;
            border-radius: 10px;
            background-color: #ccc;
            box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.2);
        }

        #demo a {
            color: #11C2EE;
        }

        #demo h2 {
            color: #3CC4A9;
        }

        #demo tooltip {
            color: #3CC4A9;
            cursor: pointer;
        }

        .tooltip-box {
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 1.6;
            /*background-color: #fff;*/
            background-color: rgb(1, 16, 23);
            /*border: 1px solid #666;*/
            font-size: 12px;
            color: #464646;
            border-radius: 5px;
            /*overflow: auto;*/
            padding: 7px;

        }

        .tooltip-box::before {
            content: '';
            width: 10px;
            height: 10px;
            position: absolute;
            top: -5px;
            left: calc(50% - 5px);
            z-index: 2;
            /*background-color: #ffffff;*/
            background-color: rgb(1, 16, 23);
            transform: rotate(45deg);
        }

        .tooltip-box img {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<div id="    ">
    <h2>实现tooltip的效果</h2>
    <hr/>
    <p>
        渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。这首诗是著名诗人<a class="tooltip"
                                                                                       tooltip="我是tooltip哦"
                                                                                       id="tooltip1">王勃</a>的作品。借此来表达自己对友人的依依惜别之意。
    </p>
    <p>
        渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。这首诗是著名诗人<a class="tooltip"
                                                                                       tooltip="我是tooltip哦2222"
                                                                                       id="tooltip11">王勃</a>的作品。借此来表达自己对友人的依依惜别之意。
    </p>

    <p>
        我喜欢古诗，因为它能给别人更多的理解，想象。古诗是很唯美的，随处可见的美景，比如<a class="tooltip"
                                                                                      tooltip='<img src="./viewpoint-tour.png" width="400" />'
                                                                                      id="tooltip2">荷花</a>，便有，接天莲叶无穷碧，映日荷花别样红。多美的诗呀！
    </p>
</div>
<script>
  const className = 'tooltip-box'

  const isIE = navigator.userAgent.indexOf('MSIE') > -1

  function showTooltip(obj, id, html, width, height) {
    if(document.getElementById(id) == null) {

      let tooltipBox
      tooltipBox = document.createElement('div')
      tooltipBox.className = className
      tooltipBox.id = id
      tooltipBox.innerHTML = html

      obj.appendChild(tooltipBox)

      tooltipBox.style.width = width ? width + 'px' : 'auto'
      tooltipBox.style.height = height ? height + 'px' : 'auto'

      if(!width && isIE) {
        tooltipBox.style.width = tooltipBox.offsetWidth
      }

      tooltipBox.style.position = 'absolute'
      tooltipBox.style.display = 'block'
      // bottom left效果------
      // let left = obj.offsetLeft
      // const top = obj.offsetTop + obj.offsetHeight

      // bottom center效果------
      let left = obj.offsetLeft + (obj.offsetWidth - tooltipBox.offsetWidth) / 2
      const top = obj.offsetTop + obj.offsetHeight + 8
      // const top = 0

      if(left + tooltipBox.offsetWidth > document.body.clientWidth) {
        const demoLeft = document.getElementById('demo').offsetLeft
        left = document.body.clientWidth - tooltipBox.offsetWidth - demoLeft
        if(left < 0) left = 0
      }

      tooltipBox.style.left = left + 'px'
      tooltipBox.style.top = top + 'px'

      obj.onmouseleave = function() {
        setTimeout(function() {
          document.getElementById(id).style.display = 'none'
        }, 100)
      }

    } else {
      document.getElementById(id).style.display = 'block'
    }
  }

  //查询到所有含有 tooltip属性的 dom节点
  const nodeList = document.querySelectorAll('[tooltip]')
  console.log(nodeList, 'node')
  for(let i of nodeList) {
    console.log(i.getAttribute('tooltip'))
    i.addEventListener('mouseenter', () => {
      console.log(i, 'this')
      showTooltip(i, i.getAttribute('id') + 'tooltip', i.getAttribute('tooltip'))
    })
  }

  // const t1 = document.getElementById('tooltip1')
  // t1.onmouseenter = function() {
  //   console.log(this, '999999999+++++++++++') //a标签
  //   showTooltip(this, 't1', '唐代诗人，唐初四大才子之一', 150)
  // }
  // //
  // const t2 = document.getElementById('tooltip2')
  // t2.onmouseenter = function() {
  //   showTooltip(this, 't4', '<img src="./viewpoint-tour.png" width="400" /> ', 400)
  // }

</script>
</body>
</html>
